<template>
  <div>
    <el-col>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
            <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button
            >
            <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleExport"
                >导出</el-button
            >
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="printerList">
            <el-table-column label="序号" align="center" width="80">
            <template slot-scope="scope">
                <span>{{
                (queryParams.pageNum - 1) * queryParams.pageSize +
                scope.$index +
                1
                }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="印刷机名称"
            align="center"
            prop="name"
            />
            <el-table-column
            label="最大进纸长边(mm)"
            align="center"
            prop="maxPaperLongEdge"
            />
            <el-table-column
            label="最大进纸短边(mm)"
            align="center"
            prop="maxPaperShortEdge"
            />
            <el-table-column
            label="虚拟幅面长边(mm)"
            align="center"
            prop="virtualLongEdge"
            />
            <el-table-column
            label="虚拟幅面短边(mm)"
            align="center"
            prop="virtualShortEdge"
            />
            <el-table-column
            label="色数"
            align="center"
            prop="colorCount"
            />
            <el-table-column
            label="是否启用"
            align="center"
            prop="enabled"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.enabled"
                        active-value="1"
                        inactive-value="2"
                        @change="(value) => printerChange(value, scope.row.id)"
                        active-color="#1890ff"
                        inactive-color="#909399">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
            label="显示排序"
            align="center"
            prop="sort"
            />
            <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    >编辑</el-button
                    >
                    <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getPrinterList"
        />
    </el-col>

    <!--新增页面-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        :direction="direction"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        :wrapperClosable="false"
        size="40%"
        :before-close="handleClose">
        
        <el-form :model="form" :rules="rules" ref="form" label-width="150px">
            <el-form-item label="印刷机名称" prop="name">
                <el-input class="custom-input" v-model="form.name" maxlength="100" placeholder="请输入印刷机名称"></el-input>
            </el-form-item>
            <el-form-item label="最大进纸长边" prop="maxPaperLongEdge">
                <el-input class="custom-input" v-model="form.maxPaperLongEdge" placeholder="请输入最大进纸长边"></el-input><span class="unit-text">毫米</span>
            </el-form-item>
            <el-form-item label="最大进纸短边" prop="maxPaperShortEdge">
                <el-input class="custom-input" v-model="form.maxPaperShortEdge" placeholder="请输入最大进纸短边"></el-input><span class="unit-text">毫米</span>
            </el-form-item>
            <el-form-item label="虚拟幅面长边" prop="virtualLongEdge">
                <el-input class="custom-input" v-model="form.virtualLongEdge" placeholder="请输入虚拟幅面长边"></el-input><span class="unit-text">毫米</span>
            </el-form-item>
            <el-form-item label="虚拟幅面短边" prop="virtualShortEdge">
                <el-input class="custom-input" v-model="form.virtualShortEdge" placeholder="请输入虚拟幅面短边"></el-input><span class="unit-text">毫米</span>
            </el-form-item>
            <el-form-item label="色数" prop="colorCount">
                <el-input class="custom-input" v-model="form.colorCount"></el-input>
            </el-form-item>
            <el-form-item label="可用平张纸规格">
                <el-select class="custom-input" v-model="form.flatPaperList" multiple placeholder="请选择可用平张纸规格">
                    <el-option v-for="item in flatPaperList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可用分切纸规格">
                <el-select class="custom-input" v-model="form.cutPaperList" multiple placeholder="请选择可用分切纸规格">
                    <el-option v-for="item in cutPaperList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--产品部件-->
            <el-form-item label="指定产品及部件">
                <div class="block">
                    <el-cascader
                        v-model="form.productions"
                        :options="productions"
                        :props="props"
                        clearable></el-cascader>
                </div>
            </el-form-item>
            <!--指定用纸-->
            <el-form-item label="指定用纸">
                <el-select class="custom-input" v-model="form.paperTypes" multiple placeholder="请选择指定用纸">
                    <el-option v-for="item in paperTypes" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示排序" prop="sort">
                <el-input class="custom-input" v-model="form.sort" placeholder="请输入排序数字"></el-input>
            </el-form-item>
            <el-form-item label="启用此印刷机" prop="enabled">
                <el-switch v-model="form.enabled"
                    active-value="1"
                    inactive-value="2"
                    active-color="#1890ff"
                    inactive-color="#909399"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

  </div>
</template>

<script>

import {
  listPrinters,
  getPrinters,
  addPrinters,
  updatePrinters,
  delPrinters,
  listFlatPaper,
  listCutPaper,
  listPaper,
  listProduction,
} from "@/api/base/digitalPrinters";

export default {
  dicts:[
    'digital_printers_color',//颜色下拉字典
  ],
  data() {
    return {
        //加载状态
        loading: true,
        //印机详情显示控制
        drawer: false,
        //产品部件级联菜单的多选控制
        props: { multiple: true },
        //印机详情打开方向控制
        direction: 'rtl',
        drawerTitle:"",
        total:0,
        //印机表单数据
        form: {
            enabled:'2',
            sort: '0'
        },
        //平张纸下拉
        flatPaperList: [],
        //分切纸下拉
        cutPaperList: [],
        //指定用纸下拉
        paperTypes: [],
        //产品部件下拉
        productions: [],
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
        },
        //印机数据
        printerList: [],
        rules:{
            name: [
                { required: true, message: '请输入印刷机名称', trigger: 'blur' },
                { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
            ],
            maxPaperLongEdge: [
                 { required: true, message: '请输入最大进纸长边', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            maxPaperShortEdge: [
                 { required: true, message: '请输入最大进纸短边', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            virtualLongEdge: [
                 { required: true, message: '请输入虚拟幅面长边', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            virtualShortEdge: [
                 { required: true, message: '请输入虚拟幅面短边', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            colorCount: [
                 { required: true, message: '请输入色数', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            sort: [
                { required: true, message: '请输入排序', trigger: 'blur' },
                 {
                    pattern: /^(0|[1-9]\d{0,4})$/,
                    message: "请输入0-99999的整数",
                    trigger: "blur"
                }
            ],
            flatPaper: [
                 { required: true, message: '请选择可用平张纸规格', trigger: 'blur' },
            ],
            cutPaper: [
                 { required: true, message: '请选择可用分切纸规格', trigger: 'blur' },
            ],
            production: [//产品部件
                 { required: true, message: '请选择指定产品及部件', trigger: 'blur' },
            ],
            paperType: [
                 { required: true, message: '请选择指定用纸', trigger: 'blur' },
            ],
        }
    }
  },

  created() {
    this.getPrinterList();
  },
  methods: {
    //获取数码印机列表数据
    async getPrinterList(){
        try{
            this.loading = true;
            const res = await listPrinters(this.queryParams)
            if(res && res.code ===200){
                this.printerList = res.rows
                this.total = res.total
            }
        }catch(error){
            console.log('查询印机详情出错',error)
        }finally{
            this.loading = false
        }
    },
    //查询详情信息
    async getgetPrinterInfo(id){
        try{
            const res = await getPrinters(id)
            if(res && res.code ===200){
                this.form = res.data
            }
        }catch(error){
            console.log('查询印机详情出错',error)
        }  
    },
    //查询平张纸规格下拉
    async getFlatPaperList(){
        try{
            const res = await listFlatPaper()
            if(res && res.code ===200){
                this.flatPaperList = res.data
            }
        }catch(error){
            console.log('查询平张纸规格下拉出错',error)
        }  
    },
    //查询分切纸规格下拉
    async getCutPaperList(){
        try{
            const res = await listCutPaper()
            if(res && res.code ===200){
                this.cutPaperList = res.data
            }
        }catch(error){
            console.log('查询分切纸规格下拉出错',error)
        }  
    },
    //查询产品部件下拉
    async getProductionList(){
        try{
            const res = await listProduction()
            if(res && res.code ===200){
                this.productions = res.data
            }
        }catch(error){
            console.log('查询产品部件下拉出错',error)
        }  
    },
    //查询指定用纸下拉
    async getPaperList(){
        try{
            const res = await listPaper()
            if(res && res.code ===200){
                this.paperTypes = res.data
            }
        }catch(error){
            console.log('查询指定用纸下拉出错',error)
        }  
    },

    //新增按钮
    handleAdd(){
        this.getFlatPaperList();
        this.getCutPaperList();
        this.getProductionList();
        this.getPaperList();
        this.drawerTitle = '新增印刷机信息';
        this.drawer = true;
    },
    //编辑按钮
    handleUpdate(row){
        this.getFlatPaperList();
        this.getCutPaperList();
        this.getProductionList();
        this.getPaperList();
        this.getgetPrinterInfo(row.id)
        this.drawerTitle = '编辑印刷机信息';
        this.drawer = true;
    },
    //删除按钮
    handleDelete(row){
        console.log('删除',row)
        this.$modal
            .confirm('是否确定删除信息？删除后数据将无法恢复，请谨慎操作')
            .then(function () {
                return delPrinters(row.id);
            })
            .then(() => {
                this.getPrinterList();
                this.$modal.msgSuccess("删除成功");
                this.$emit("reload-tree",'root')
            })
            .catch(() => {});
    },
    //列表是否启用开关
    async printerChange(value, id){
        try{
            await updatePrinters({
                id: id,
                enabled: value
            });
        }catch(error){
            console.log('印机开关修改出错',error)
        }
    },

    //表单提交按钮
    async submitForm(){


        // 先进行表单校验
        const valid = await this.$refs.form.validate().catch(err => {
          // 校验失败时返回false，不抛出异常
          return false;
        });
        // 如果校验未通过，直接返回
        if (!valid) {
          return;
        }
        
        try{
            if(this.form.id){//修改保存
                const res = await updatePrinters(this.form);
                if(res && res.code===200){
                    this.$message.success("添加成功");
                    //关闭弹框
                    this.handleClose();
                    this.$emit("reload-tree",'root')
                }
            }else{
                const res = await addPrinters(this.form);
                if(res && res.code===200){
                    this.$message.success("添加成功");
                    //关闭弹框
                    this.handleClose();
                    this.$emit("reload-tree",'root')
                }
            }
        }catch(error){
            console.log('新增印机出错',error)
        }finally{
            this.getPrinterList();
        }
        

    },
    //关闭印机详情页面
    handleClose(){
        this.drawer = false;
        this.resetForm()
    },
    resetForm(){
        this.form = {
            enabled:'2',
            sort: '0'
        }
    },
    //导出
    handleExport(){
        console.log('导出')
        this.download('digital/printers/export', {
        ...this.queryParams
      }, `printers_${new Date().getTime()}.xlsx`)
    },
  }
}
</script>

<style lang="scss" scoped>
    .custom-input {
        width: 80%;  /* 设置输入框宽度 */
    }
    .unit-text {
        font-size: 14px;
        color: #606266;
        margin-left: 2px;  /* 设置“毫米”文本的左边距 */
    }
</style>
